<%--
  Created by IntelliJ IDEA.
  User: lqs
  Date: 2023/10/12
  Time: 10:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
    <style>
        .password-change {
            max-width: 400px;
            margin: 0 auto;
        }

        h2 {
            text-align: center;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-weight: bold;
        }

        input[type="password"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
        }

        button[type="submit"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="password-change">
        <h2>修改密码</h2>
        <form @submit.prevent="changePassword">
            <div class="form-group">
                <label for="current-password">当前密码</label>
                <input type="password" id="current-password" v-model="currentPassword" required>
            </div>
            <div class="form-group">
                <label for="new-password">新密码</label>
                <input type="password" id="new-password" v-model="newPassword" required>
            </div>
            <div class="form-group">
                <label for="confirm-password">确认新密码</label>
                <input type="password" id="confirm-password" v-model="confirmPassword" required>
            </div>
            <button type="submit">确认修改</button>
        </form>
    </div>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            ynmima:'',
            currentPassword: '',
            newPassword: '',
            confirmPassword: '',
        },
        created(){

        },

        methods: {
            init(){

            },
            changePassword() {
                // 在这里处理修改密码的逻辑
                if (this.newPassword != this.confirmPassword) {
                    alert('新密码与确认密码不一致');
                    return;
                }
                axios.post("/home/updatemima?currentPassword=" + this.currentPassword + "&newPassword=" + this.newPassword).then(function (resp) {
                    console.log(resp)
                    console.log(resp.data.code)
                    if (resp.data.code == 200) {
                        app.$message({
                            type: 'success',
                            message: resp.data.msg
                        });
                        window.location.href='http://localhost:8081/login.jsp';

                    } else {
                        app.$message({
                            type: 'danger',
                            message: resp.data.msg
                        });
                    }
                    app.currentPassword = '',
                        app.newPassword = '',
                        app.confirmPassword = ''

                })


            }
        },
    })
</script>
</body>
</html>
